<template>
  <div class="wrap">
    <h4>
      <backBtn type="business"></backBtn>{{$t('business.newBusiness')}}
    </h4>
    <new-business @flowChange="flowChange" :show-title="false" v-if="!loading" @event="businessEvent" ref="newBusiness" :custInfo="customer" style="padding: 20px">
      <el-form slot="customer" >
        <el-form-item :label="$t('customer.relatedCustomer')" :required="(businessFlow[currentFlow] && businessFlow[currentFlow].customerRequire === 'no') ? false : true">
          <el-input v-model="customer.name" disabled style="width: 200px; margin-right: 15px; color:#000"></el-input>
          <el-button class="primary_btn" @click="showDialog">{{customer.name ? $t('customer.changeCustomer'): $t('customer.addCustomer')}}</el-button>
        </el-form-item>
      </el-form>
    </new-business>
    <el-dialog class="customer-dialog" :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :title="customerInfo.title"  :visible.sync="customerInfo.show" v-if="customerInfo.show">
      <add-customer
        :isTag="false"
        :isBlight = "false"
        :labelValue = "customerInfo.labelValue"
        :labelTitle = "customerInfo.title"
        :reSize = "true"
        :isDalog = "customerInfo.isdealog"
        :isDailog = "true"
        :currentBusinessObj="currentBusinessObj"
        :custInfo="{}"
        :isTitle="true"
        :labelName="{add: $t('business.addNewCustomer'), merge: $t('business.searchCustomer')}"
        @addCustomer="addCustomer"
        @merge="mergeCustomer"
        @closeDialog="closeDialog"
      ></add-customer>
    </el-dialog>
  </div>
</template>
<script>
  import NewBusiness from '@/components/public-modules/cust-tab-content/business/NewBusiness'
  import AddCustomer from '../customer/AddCustomer'
  import backBtn from '@/components/public-modules/side-bar/BackSideBar.vue'
  export default {
    name: 'newBusinessAndCustomer',
    data () {
      return {
        loading: true,
        customerInfo: {
          show: false,
          isdealog: true,
          labelValue: 6,
          title: this.$t('customer.addCustomer')
        },
        // 业务对象
        currentBusinessObj: {
          type: 'business',
          tabType: 'new_business'
        },
        // 客户信息
        customer: {
        },
        businessFlow: {},
        currentFlow: ''
      }
    },
    components: {
      NewBusiness,
      AddCustomer,
      backBtn
    },
    methods: {
      showDialog () {
        this.customerInfo.show = true
      },
      closeDialog () {
        this.customerInfo.show = false
      },
      addCustomer (form) {
        delete form.dealSrc
        delete form.callId
        this.$store.dispatch('addCustomer', form).then((val) => {
          if (val.success) {
            this.customer = val.data
            this.customerInfo.show = false
            this.$nextTick(() => {
              this.$refs.newBusiness && this.$refs.newBusiness.refreshForm(this.$refs.newBusiness.form.flow)
            })
          }
        })
      },
      businessEvent (eventData) {
        let eventType = eventData.event
        let data = eventData.data
        if (this.customer._id) {
          data.form.customer = this.customer._id
        } else if((this.businessFlow[this.currentFlow] && !this.businessFlow[this.currentFlow].customerRequire) || this.businessFlow[this.currentFlow].customerRequire === 'yes') {
          this.$message.error(this.$t('customer.relatedCustomer') + this.$t('public.noEmpty'))
          return
        }
        if (eventType === 'addTempBusinessTask') {
          let stepCache = {}
          stepCache._id = data.stepCacheCurId ? data.stepCacheCurId : ''
          stepCache.actionId = data.form.nextAction
          let actionFields = data.form.actionFields ? data.form.actionFields : null
          data.form.stepCache = Object.assign(stepCache, actionFields)
        }
        if(data.form){
          if(this.callScreen){
            data.form.createMode = 'call'
          }else{
            data.form.createMode = this.$route.path.split('/')[2]
          }
          data.form.existAttach = false
          for(var key in data.form){
            if(data.form[key] instanceof Array){
              if(data.form[key].length>0&&data.form[key][0].name){
                data.form.existAttach = true
              }
            }
          }
          for(var key in data.form.actionFields){
            if(data.form.actionFields[key] instanceof Array){
              if(data.form.actionFields[key].length>0&&data.form.actionFields[key][0].name){
                data.form.existAttach = true
              }
            }
          }
        }
        this.$store.dispatch(eventType, data.form).then((res) => {
          // 清空表单
          this.resetForm()
          let _obj1 = {
            module: 'business',
            random: Math.random()
          }
          this.$router.push({path: '/index/business', query: {active: 'business_all', flag: 'toCard'}})
          this.$store.commit('NOTICEBUSSINESS', _obj1)
        })
         //刷新左侧菜单栏数量统计
        this.$store.commit('business/REFRESH_MENUBAR',Math.random())
      },
      // 选择已有客户
      mergeCustomer (data) {
        this.customer = data.custInfo
        this.customerInfo.show = false
        this.$nextTick(() => {
          this.$refs.newBusiness && this.$refs.newBusiness.refreshForm(this.$refs.newBusiness.form.flow)
        })
      },
      resetForm () {
        this.customer = {}
        if (this.$refs.newBusiness) {
          this.$refs.newBusiness.refreshForm()
        }
      },
      flowChange(e) {
        this.currentFlow = e
      }
    },
    beforeMount () {
      Promise.all([
        this.$store.dispatch('getCache', {type: 'businessFlowStep'}),
        this.$store.dispatch('getCache', {type: 'businessFlow'}),
        this.$store.dispatch('getCache', {type: 'agents'})
      ]).then(([p1,p2,p3]) => {
        p2.map((item) => {
          this.businessFlow[item._id] = item
        })
        this.loading = false
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .wrap
    height 100%
    overflow auto
  h4
    line-height 40px
    border-bottom 1px solid $c-border1
    padding 0 20px
    font-weight bold
  .customer
    line-height 40px
</style>
